<template>
  <view class="page_root" data-page-name="首页" data-page-identification="f_u8sr1ky14v">
    <!-- UNI_APP_EXEGESIS_START NAVIGATION_TEMPLATE UNI_APP_EXEGESIS_END -->
    <!-- begin vid_asmx4o74v7 自定义模板_kk4fxrnmsf -->

    <!-- 新建工单 -->
    <u-popup
      v-model="state.addOrEditVisible"
      height="100%"
      :mask-close-able="false"
      closeable
      mode="bottom"
    >
      <view class="popup-container">
        <view class="popup-header">
          新建工单
          <view class="header-icon">
            <u-icon name="close" color="#d9d9d9" size="28" @click="resetFather"></u-icon>
          </view>
        </view>
        <view class="custom-tabs">
          <view class="custom-tab" :class="{ active: state.current === 0 }" @click="tabChange(0)">
            {{ tabList[0].name }}
          </view>
          <view class="border-middle"></view>
          <view class="custom-tab" :class="{ active: state.current === 1 }" @click="tabChange(1)">
            {{ tabList[1].name }}
          </view>
        </view>
        <scroll-view class="popup-body" scroll-y>
          <view class="body-inner">
            <u-form :model="state.modalForm" ref="formRef" :rules="rules">
              <view v-show="state.current == 0">
                <u-form-item
                  label-position="top"
                  label="工单标题"
                  :borderBottom="false"
                  required="true"
                  prop="content"
                >
                  <u-input
                    placeholder="请输入..."
                    clearable
                    border="true"
                    v-model:modelValue="state.modalForm.content"
                    class="input-disabled"
                  ></u-input>
                </u-form-item>

                <u-form-item
                  label-position="top"
                  label="工单类型"
                  :borderBottom="false"
                  required="true"
                  prop="type"
                >
                  <u-input
                    v-model:modelValue="state.modalForm.type"
                    type="select"
                    border="true"
                    class="input-disabled"
                    @click="state.addTypeVisible = true"
                    clearable
                  />

                  <u-select
                    v-model="state.addTypeVisible"
                    @confirm="handleTypeConfirm"
                    :default-value="[state.modalForm.type]"
                    :pickValue="[state.modalForm.type]"
                    mode="single-column"
                    label-name="label"
                    value-name="value"
                    :list="state.workTypeList"
                  />
                </u-form-item>

                <!-- 优先级 -->
                <u-form-item
                  label-position="top"
                  label="优先级"
                  :borderBottom="false"
                  required="true"
                  prop="priority"
                >
                  <u-input
                    placeholder="请选择..."
                    :disabled="state.modalForm.type === '产品需求'"
                    type="select"
                    border="true"
                    v-model:modelValue="state.modalForm.priority"
                    class="input-disabled"
                    @click="state.priorityVisible = true"
                    clearable
                  ></u-input>
                  <u-select
                    v-model="state.priorityVisible"
                    @confirm="handlePriorityConfirm"
                    :pickValue="[state.modalForm.priority]"
                    mode="single-column"
                    label-name="label"
                    value-name="value"
                    :list="[
                      {
                        label: 'p0',
                        value: 'p0',
                      },
                      {
                        label: 'p1',
                        value: 'p1',
                      },
                      {
                        label: 'p2',
                        value: 'p2',
                      },
                      {
                        label: 'p3',
                        value: 'p3',
                      },
                    ]"
                    :clearable="false"
                  ></u-select>
                </u-form-item>
                <!-- 优先级 -->
                <!-- 计划解决时间 -->
                <u-form-item
                  label-position="top"
                  label="计划解决时间"
                  :borderBottom="false"
                  required="true"
                  prop="endTime"
                >
                  <u-input
                    v-model:modelValue="state.modalForm.endTime"
                    type="select"
                    border="true"
                    class="input-disabled"
                    clearable
                    @click="state.timeVisible = true"
                  />
                  <!-- 开始时间-结束时间选择 -->
                  <u-calendar
                    ref="calendarRef"
                    v-model="state.timeVisible"
                    mode="date"
                    tooltip="选择开始和结束时间"
                    @change="handleTimeConfirm"
                    z-index="99999999"
                  ></u-calendar>
                  <!-- 开始时间-结束时间选择 -->
                </u-form-item>
                <!-- 计划解决时间 -->
                <!-- 问题描述 -->
                <u-form-item
                  label-position="top"
                  label="问题描述"
                  :borderBottom="false"
                  required="true"
                  prop="description"
                >
                  <u-input
                    auto-height
                    v-model:modelValue="state.modalForm.description"
                    type="textarea"
                    border="true"
                    clearable
                  />
                </u-form-item>
                <!-- 问题描述 -->
              </view>
              <view v-show="state.current == 1">
                <!-- 监控场景 -->
                <u-form-item label-position="top" label="监控场景" :borderBottom="false">
                  <u-input
                    v-model:modelValue="state.modalForm.monitorSceneZh"
                    type="select"
                    border="true"
                    class="input-disabled"
                    @click="showMonitorScence"
                    @clear="handleMonitorScenceClear"
                    clearable
                  />

                  <u-select
                    v-model="state.addMonitorSceneVisible"
                    @confirm="handleMonitorScenceConfirm"
                    :default-value="[state.modalForm.monitorScene]"
                    :pickValue="[state.modalForm.monitorScene]"
                    mode="single-column"
                    label-name="label"
                    value-name="value"
                    :list="state.monitorSceneList"
                  />
                </u-form-item>
                <!-- 监控场景 -->
                <!-- 计划解决时长 -->
                <u-form-item
                  label-position="top"
                  label="计划解决时长(小时)"
                  :borderBottom="false"
                  v-if="state.modalForm.type !== '产品需求'"
                >
                  <u-input
                    v-model:modelValue="state.modalForm.workHours"
                    type="number"
                    border="true"
                    class="input-disabled"
                    clearable
                    @input="getSolveTime"
                  />
                </u-form-item>
                <!-- 计划解决时长 -->
                <!-- 问题来源 -->
                {{ state.modalForm.questionSource }}
                <u-form-item label-position="top" label="问题来源" :borderBottom="false">
                  <u-input
                    placeholder="请选择..."
                    type="select"
                    border="true"
                    v-model:modelValue="state.modalForm.questionSource"
                    class="input-disabled"
                    @click="getWtly"
                    clearable
                  ></u-input>
                  <u-select
                    v-model="state.sourceVisible"
                    @confirm="handleSourceConfirm"
                    :pickValue="[state.modalForm.questionSource]"
                    mode="single-column"
                    label-name="label"
                    value-name="value"
                    :list="state.wtlyList"
                    :clearable="false"
                  ></u-select>
                </u-form-item>
                <!-- 问题来源 -->
                <!-- 区域 -->
                这 {{ state.modalForm.areaCodeZh }}
                {{ state.modalForm.areaCode }}
                <u-form-item label-position="top" label="区域" :borderBottom="false">
                  <u-input
                    v-model:modelValue="state.modalForm.areaCodeZh"
                    type="select"
                    border="true"
                    class="input-disabled"
                    @click="getAreaList"
                    @clear="handleAreaClear"
                    clearable
                    @change="changeArea"
                  />

                  <u-select
                    v-model="state.areaVisible"
                    @confirm="handleAreaConfirm"
                    :default-value="[state.modalForm.areaCode]"
                    :pickValue="[state.modalForm.areaCode]"
                    mode="single-column"
                    label-name="label"
                    value-name="value"
                    :list="state.areaList"
                  />
                </u-form-item>
                <!-- 区域 -->
                <!-- 客户 -->
                这 {{ state.modalForm.customerZh }}
                {{ state.modalForm.customer }}
                <u-form-item label-position="top" label="客户" :borderBottom="false">
                  <u-input
                    v-model:modelValue="state.modalForm.customerZh"
                    type="select"
                    border="true"
                    class="input-disabled"
                    @click="getCustomerList"
                    @clear="handleCostomClear"
                    clearable
                  />

                  <u-select
                    v-model="state.costomVisible"
                    @confirm="handleCostomfirm"
                    :default-value="[state.modalForm.customer]"
                    :pickValue="[state.modalForm.customer]"
                    mode="single-column"
                    label-name="label"
                    value-name="value"
                    :list="state.customList"
                  />
                </u-form-item>
                <!-- 客户 -->
                <!-- 项目 -->
                这 {{ state.modalForm.projectIdZh }}
                {{ state.modalForm.projectId }}
                <u-form-item label-position="top" label="项目" :borderBottom="false">
                  <u-input
                    v-model:modelValue="state.modalForm.projectIdZh"
                    type="select"
                    border="true"
                    class="input-disabled"
                    @click="getProjectList"
                    @clear="handleProjectClear"
                    clearable
                  />

                  <u-select
                    v-model="state.projectVisible"
                    @confirm="handleProjectConfirm"
                    :default-value="[state.modalForm.projectId]"
                    :pickValue="[state.modalForm.projectId]"
                    mode="single-column"
                    label-name="label"
                    value-name="value"
                    :list="state.projectList"
                  />
                </u-form-item>
                <!-- 项目 -->
                <!-- 项目阶段 -->
                这 {{ state.modalForm.milepostIdZh }}
                {{ state.modalForm.milepostId }}
                <u-form-item label-position="top" label="项目阶段" :borderBottom="false">
                  <u-input
                    v-model:modelValue="state.modalForm.milepostIdZh"
                    type="select"
                    border="true"
                    class="input-disabled"
                    @click="getMilepostList"
                    @clear="handleMilepostClear"
                    clearable
                  />

                  <u-select
                    v-model="state.milepostVisible"
                    @confirm="handleMilepostConfirm"
                    :default-value="[state.modalForm.milepostId]"
                    :pickValue="[state.modalForm.milepostId]"
                    mode="single-column"
                    label-name="label"
                    value-name="value"
                    :list="state.milepostList"
                  />
                </u-form-item>
                <!-- 项目阶段 -->
                <!-- 任务 -->
                这 {{ state.modalForm.taskIdZh }}
                {{ state.modalForm.taskId }}
                <u-form-item label-position="top" label="任务名称" :borderBottom="false">
                  <u-input
                    v-model:modelValue="state.modalForm.taskIdZh"
                    type="select"
                    border="true"
                    class="input-disabled"
                    @click="getTaskList"
                    @clear="handleTaskClear"
                    clearable
                  />

                  <u-select
                    v-model="state.taskVisible"
                    @confirm="handleTaskConfirm"
                    :default-value="[state.modalForm.taskId]"
                    :pickValue="[state.modalForm.taskId]"
                    mode="single-column"
                    label-name="label"
                    value-name="value"
                    :list="state.taskList"
                  />
                </u-form-item>
                <!-- 任务 -->
                <!-- 环境 -->
                这 {{ state.modalForm.environment }}
                {{ state.modalForm.environment }}
                <u-form-item label-position="top" label="环境" :borderBottom="false">
                  <u-input
                    v-model:modelValue="state.modalForm.environment"
                    type="select"
                    border="true"
                    class="input-disabled"
                    @click="getEnvironmentList"
                    @clear="handleEnvironmentClear"
                    clearable
                  />

                  <u-select
                    v-model="state.environmentVisible"
                    @confirm="handleEnvironmentConfirm"
                    :default-value="[state.modalForm.environment]"
                    :pickValue="[state.modalForm.environment]"
                    mode="single-column"
                    label-name="label"
                    value-name="value"
                    :list="state.environmentList"
                  />
                </u-form-item>
                <!-- 环境 -->
                <!-- 产品 -->
                这 {{ state.modalForm.production }}
                {{ state.modalForm.production }}
                <u-form-item label-position="top" label="产品" :borderBottom="false">
                  <u-input
                    v-model:modelValue="state.modalForm.production"
                    type="select"
                    border="true"
                    class="input-disabled"
                    @click="getProductList"
                    @clear="handleProductionClear"
                    clearable
                  />

                  <u-select
                    v-model="state.productionVisible"
                    @confirm="handleProductionConfirm"
                    :default-value="[state.modalForm.production]"
                    :pickValue="[state.modalForm.production]"
                    mode="single-column"
                    label-name="label"
                    value-name="value"
                    :list="state.productList"
                  />
                </u-form-item>
                <!-- 产品 -->
                <!-- 版本 -->
                这 {{ state.modalForm.version }}
                {{ state.modalForm.version }}
                <u-form-item label-position="top" label="版本" :borderBottom="false">
                  <u-input
                    v-model:modelValue="state.modalForm.version"
                    type="select"
                    border="true"
                    class="input-disabled"
                    disabled
                  />
                </u-form-item>
                <!-- 版本 -->
                <!-- 告警级别 -->
                这 {{ state.modalForm.warningLevel }}
                {{ state.modalForm.warningLevel }}
                <u-form-item label-position="top" label="告警级别" :borderBottom="false">
                  <u-input
                    v-model:modelValue="state.modalForm.warningLevel"
                    type="select"
                    border="true"
                    class="input-disabled"
                    @click="getWarnList"
                    @clear="handleWarnClear"
                    clearable
                  />
                  <u-select
                    v-model="state.warnVisible"
                    @confirm="handleWarnConfirm"
                    :default-value="[state.modalForm.production]"
                    :pickValue="[state.modalForm.production]"
                    mode="single-column"
                    label-name="label"
                    value-name="value"
                    :list="state.warnList"
                  />
                </u-form-item>
                <!-- 告警级别 -->
                {{ state.modalForm.descriptionAttachmentList }}
                <!-- 上传附件 -->
                <u-form-item
                  label-position="top"
                  label="图片："
                  prop="attachment"
                  :border-bottom="false"
                >
                  <u-upload
                    width="106px"
                    height="106px"
                    class="vid_rg51oa99zm"
                    :action="uploadProrps.action"
                    :uploadFile="uploadProrps.uploadFile"
                    :isShowFormatContent="uploadProrps.isShowFormatContent"
                    :listType="uploadProrps.listType"
                    :required="uploadProrps.required"
                    v-model:fileList="state.modalForm.descriptionAttachmentList"
                    :deletable="uploadDisabled"
                    maximumFileSize="uploadProrps.maximumFileSize"
                    @uploadFailed="handle_vid_rg51oa99zm_uploadFailed"
                    @uploadSuccess="handle_vid_rg51oa99zm_uploadSuccess"
                    @removeSuccess="handle_vid_rg51oa99zm_uploadSuccess"
                  >
                  </u-upload>
                </u-form-item>
                <!-- 上传附件 -->
              </view>
            </u-form>
          </view>
        </scroll-view>
        <view class="popup-footer">
          <u-row gutter="24">
            <u-col :span="6">
              <u-button type="primary" @click="resetFather">取消</u-button>
            </u-col>
            <u-col :span="6">
              <u-button type="primary" @click="submit" :loading="state.fatherLoading"
                >确定</u-button
              >
            </u-col>
          </u-row>
        </view>
      </view>
    </u-popup>
    <!-- 新建工单 -->
    <!-- 页面部分 -->
    <view class="main">
      <view class="title">
        <view class="now-data"></view>
        <view class="add-btn" @click="handleAdd">
          <view class="add-img"></view>
          新建工单
        </view>
      </view>
      <view class="classify-content">
        <view
          class="classify-item"
          v-for="(item, index) in classifyList"
          :key="index"
          @click="jumpList(item.typeKey)"
        >
          <view class="classify-left">
            <view class="classify-img-body">
              <view
                class="classify-img"
                :style="{
                  backgroundImage: `url(${item.img})`,
                }"
              ></view
            ></view>
            <view class="classify-title">{{ item.title }}</view>
          </view>
          <view class="classify-number" :style="{ color: item.color }">{{ item.number }}个</view>
        </view>
      </view>
    </view>
    <!-- 页面部分 -->
    <!-- end vid_asmx4o74v7 自定义模板_kk4fxrnmsf -->
  </view>
</template>
<script setup>
import {
  ref,
  reactive,
  toRaw,
  markRaw,
  watch,
  computed,
  onBeforeMount,
  onMounted,
  onBeforeUnmount,
  onUnmounted,
  onActivated,
  onDeactivated,
  getCurrentInstance,
} from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios';
// import { cloneDeep, localGet, traversalTreeStructure, set, checkCaseCondition, throttle, merge, debounce, getGridStyle, getCellRenderAble, formulaStrategy, getApplicationId, getComponentParamsValue, get as lodashGet } from '@/utils/index';
// import { isEqual, isNullOrEmpty, isEmptyArr, isArray, isEmpty, isNullOrUnDef, isContained } from '@/utils/is';
// import { CovertOptions, getChartsDataSourceConvert } from '@/utils/chart';
// import { propertyFormatByNumber, propertyFormatByPercentage, propertyFormatByDate, parseSubFromDataList } from '@/utils/format';
// import { checkCommonCondition, getResultByCurrentCommonCondition } from '@/utils/formCondition';
// import { FormFormat } from '@/utils/formFormat'
// import { customAddWaterMarkFunc, generateWaterMarkText } from '@/utils/addWaterMark';
import dayjs from 'dayjs';
import { handleRedirect } from '@/utils/common';
import {
  onPullDownRefresh,
  onLoad,
  onReady,
  onShow,
  onHide,
  onPageScroll,
  onUnload,
} from '@dcloudio/uni-app';
// import hashSum from 'hash-sum';
/*** UNI_APP_EXEGESIS ***
  import { handleRedirect, permission, parseJson } from '@/utils/common';
  import { handleRedirect, permission, parseJson } from '@/utils/common';
  import { onPullDownRefresh, onLoad, onReady, onShow, onHide, onPageScroll, onUnload } from '@dcloudio/uni-app';
  import { BroadcastMessage } from '@/utils/BroadcastMessage';
  import { sendToken } from "@/hooks/useIframeToken";
  *** UNI_APP_EXEGESIS ***/

// ---------------------------- 属性定义 ----------------------------
const sourceId = 'page3000001012';

// 获取传入的流程ID和组件参数
const props = defineProps({
  processInstanceId: {
    type: [String, Number, Boolean],
    default: undefined,
  },
  hideNav: {
    type: [Boolean],
    default: undefined,
  },
});

// 组件参数默认值
const componentParamsDefaultProps = {};

// 是否显示菜单按钮
const isMenuIconShow = false;
// NAVIGATION_MENU
const handleShowNavigation = () => {};

let isProcessState = ref(false);

const setTimeOutList = [];

const vid_asmx4o74v7_props = reactive({
  code: '',
});

// ============================ 属性定义 ============================

// ---------------------------- 元素数据引用 ----------------------------
// 组件 自定义模板_kk4fxrnmsf ref 的引用
const vid_asmx4o74v7_ref = ref(null);
// 动态key的map
const fieldTypeMap = {};
// 动态key的map
const refMap = { vid_asmx4o74v7_ref };

const showState = reactive({
  vid_asmx4o74v7_visible: true,
});
// ============================ 元素数据引用 ============================

// ---------------------------- 数据 ----------------------------

// ============================ 数据 ============================

// ---------------------------- 方法 ----------------------------
// ---------------------------- 页面数据 ----------------------------

// ============================ 页面数据 ============================

// ---------------------------- 数据字典 ----------------------------

// ============================ 数据字典 ============================

// ---------------------------- 响应 ----------------------------

// ============================ 响应 ============================

// ---------------------------- 函数 ----------------------------

// 自定义函数 返回上一页
const customFunction_goBack_7m8b2men1d = (params) => {
  uni.navigateBack();
};

// ============================ 函数 ============================

// ---------------------------- 页面参数 ----------------------------

const pageParameter_state = reactive({
  processInstanceId: undefined,
});

// ============================ 页面参数 ============================

// ---------------------------- 组件事件处理方法 ----------------------------

// ============================ 组件事件处理方法 ============================

// ============================ 方法 ============================

// ---------------------------- 生命周期 ----------------------------
/*** UNI_APP_EXEGESIS ***
      // 获取上一层传递的数据
      const workflowChannel = new BroadcastMessage('WORKFLOW');
      workflowChannel.publish({ status: 'Ready' });
      workflowChannel.subscribe((data) => {
        if (data) {
          isProcessState.value = (window.self !== window.parent && data.type === 'hideHeader');
        }
      });
      *** UNI_APP_EXEGESIS ***/

const pageScrollTop = ref(0);

// *** PREVIEW_EXEGESIS ***
onMounted(() => {
  setPageParams(route.query);
  // 设置表单的rule
  try {
  } catch {
    // do nothing
  }
});
// *** PREVIEW_EXEGESIS *** //

/*** UNI_APP_EXEGESIS ***
  const routeOption = ref({})
  onLoad((option) => {
    routeOption.value = option;
  });
  onReady(() => {
    setPageParams(routeOption.value)
    // 设置表单的rule
    try{

    }catch{
        // do nothing
    }
  });
  // 图表刷新标记
  const uChartsReshowFlag = ref(false);
  onHide(() => { // 页面隐藏后标记置为false(如果不置为false无法触发图表更新)
      uChartsReshowFlag.value = false
  })
  onShow(() => {
      uChartsReshowFlag.value = true; // 页面激活后,标记置为true

      setPageParams(routeOption.value)
  })
  onPageScroll(e => {
      pageScrollTop.value = e.scrollTop
  });
  *** UNI_APP_EXEGESIS ***/

let setPageParams = (routerParam) => {
  const pageParams = [{ dataType: 'STRING', name: 'processInstanceId' }];
  const strategyMap = {
    STRING: (param, paramValue) => {
      pageParameter_state[param.name] = paramValue;
    },
    BOOLEAN: (param, paramValue) => {
      if ('true' === (paramValue || '').toLowerCase()) {
        pageParameter_state[param.name] = true;
      } else if ('false' === (paramValue || '').toLowerCase()) {
        pageParameter_state[param.name] = false;
      } else {
        // TODO: 是否要支持toast
        console.error('参数传入错误！类型不匹配！');
      }
    },
    NUMBER: (param, paramValue) => {
      if (!isNaN(paramValue)) {
        pageParameter_state[param.name] = Number(paramValue);
      } else {
        // TODO: 是否要支持toast
        console.error('参数传入错误！类型不匹配！');
      }
    },
    ARRAY: (param, paramValue) => {
      if (isNullOrUnDef(paramValue) || !paramValue || paramValue === 'undefined') {
        // default value
        pageParameter_state[param.name] = [];
      } else if (paramValue.trim().startsWith('[') && paramValue.trim().endsWith(']')) {
        try {
          pageParameter_state[param.name] = JSON.parse(decodeURI(paramValue));
        } catch (error) {
          console.error('参数解析失败 ', error);
        }
      } else {
        console.error('参数传入错误！类型不匹配！');
      }
    },
  };
  pageParams.forEach((param) => {
    strategyMap[param.dataType](param, routerParam[param.name]);
  });
};

onUnmounted(() => {
  // 销毁定时器
  setTimeOutList.forEach(({ repeat, timer }) => {
    repeat ? clearInterval(timer) : clearTimeout(timer);
  });
});

/*** UNI_APP_EXEGESIS ***
  onPullDownRefresh(() => {
    // 下拉刷新
    setTimeout(() => {
        uni.stopPullDownRefresh()
    }, 1000)
  })
  *** UNI_APP_EXEGESIS ***/

// ============================ 生命周期 ============================

// ---------------------------- 数据关联处理 ----------------------------
// ---------------------------- 组件数据同步 ----------------------------

// ============================ 组件数据同步 ============================
//
// ============================ 数据关联处理 ============================

// ---------------------- 不同组件自定义的处理逻辑 ---------------------

// ====================== 不同组件自定义的处理逻辑 ======================

// ================================定制化逻辑========================================
import { nextTick } from 'vue';
onMounted(() => {
  try {
    let appDiv = document.querySelector('#app');
    appDiv.style.background = 'linear-gradient(180deg, #E1EFFD 100%, #ffffff 0%)';
    let topHeader = document.querySelector('.uni-page-head');

    if (topHeader) topHeader.remove();
    // H5 浏览器返回（按 ←）时
    if (process.client && process.env.UNI_PLATFORM === 'h5') {
      window.addEventListener('popstate', onBackFromBrowser);
    }

    // const queryString = window.location.search;

    // // 使用 URLSearchParams 解析参数字符串
    // const urlParams = new URLSearchParams(queryString);
    // // 获取特定参数的值
    // const id = urlParams.get('id');
    // const userId = urlParams.get('userId');
    // state.formId = id;
    // state.userId = userId;
    // console.log(userId);
  } catch {
    // do nothing
  }
  // 使用 URLSearchParams 解析参数字符串
  // const urlParams = new URLSearchParams(queryString);

  // 遍历参数并输出
  // urlParams.forEach((value, key) => {
  //   console.log(`${key}: ${value}`);
  // });
  getWorkType();
  getData();
  //   getAllUser();
  //   getPmName();
  //   getPmo();
  //   getTreeData();
  //   getSearchEnvironmentList();
  //   getProductList()
});
onShow(() => {
  getData();
});
onUnmounted(() => {
  if (process.client && process.env.UNI_PLATFORM === 'h5') {
    window.removeEventListener('popstate', onBackFromBrowser);
  }
});
function onBackFromBrowser() {
  getData();
}
const tabList = [
  {
    name: '必填项',
  },
  {
    name: '非必填项',
  },
];
const uploadProrps = reactive({
  name: 'file',
  action: '/file-storage/api/v1/file/upload',
  uploadFile: (data) =>
    request({
      url: '/file-storage/api/v1/file/upload',
      method: 'POST',
      responseType: 'blob',
      withCredentials: false,
      data,
      timeout: 360000,
      headers: { 'Content-Type': 'application/json' },
    }),
  customAddWaterMarkFunc: async (file) =>
    customAddWaterMarkFunc(file, await generateWaterMarkText()),
  isShowFormatContent: false,
  showQrcode: true,
  accept: 'image/*',
  multiple: true,
  listType: 'picture',
  showUploadList: true,
  required: false,
  qrcodeUrl: undefined,
  token: undefined,
  setTimeOutList: [],
  systemFileList: [],
  isSingle: false,
  isCamera: false,
  addWatermark: false,
  maximumFileSize: '',
});
// 上传失败
let handle_vid_rg51oa99zm_uploadFailed = async (...params) => {
  // 上传失败
  const [errorMsg = ''] = params;
  toast.value.show({
    title: errorMsg,
    type: 'error',
  });
};
let handle_vid_rg51oa99zm_uploadSuccess = async (...params) => {
  post(`/solution-ppm/api/v2/built-in-system-ppm/dashboard/task/${id.value}/attachment/submit`, {
    attachment: JSON.stringify(taskDetail.value.attachment),
  }).then((res) => {
    if (res.code !== 200) {
      toast.value.show({
        title: res.message,
        type: 'error',
      });

      return;
    }
    // 上传成功
    toast.value.show({
      title: '操作成功!',
      type: 'success',
    });
  });
};

const formRef = ref();
const rules = {
  content: [{ type: 'string', required: true, message: '请输入工单标题', trigger: 'blur' }],
  type: [{ type: 'string', required: true, message: '请选择工单类型', trigger: 'blur' }],
  endTime: [{ type: 'string', required: true, message: '请选择计划解决时间', trigger: 'blur' }],
  priority: [{ type: 'string', required: true, message: '请选择优先级', trigger: 'blur' }],
  description: [{ type: 'string', required: true, message: '请输入问题描述', trigger: 'blur' }],
  workHours: [
    {
      required: true,
      validator: validateWorkingHours,
      trigger: 'blur',
    },
  ],
};
const state = reactive({
  current: 0,
  treeData: [],
  tagList: [],
  statusList: [
    {
      label: '未开始',
      value: '未开始',
    },
    {
      label: '解决中',
      value: '解决中',
    },
    {
      label: '已解决',
      value: '已解决',
    },
    {
      label: '已关闭',
      value: '已关闭',
    },
    {
      label: '已回访',
      value: '已回访',
    },
  ],
  changeStausList: [
    {
      label: '正在处理',
      value: '正在处理',
    },
    {
      label: '已解决',
      value: '已解决',
    },
    {
      label: '无需解决',
      value: '无需解决',
    },
    {
      label: '申请流转',
      value: '申请流转',
    },
  ],
  changeHaveSonStausList: [],

  dataList: [],
  addOrEditVisible: false,
  modalTitle: '',
  modalForm: {
    content: undefined,
    type: undefined,
    priority: undefined,
    questionSource: undefined,
    monitorScene: undefined,
    monitorSceneZh: undefined,
    workHours: undefined,
    endTime: undefined,
    areaCode: undefined,
    areaCodeZh: undefined,
    projectId: undefined,
    projectIdZh: undefined,
    milepostId: undefined,
    milepostIdZh: undefined,
    taskId: undefined,
    taskIdZh: undefined,
    version: undefined,
    warningLevel: undefined,
    customer: undefined,
    customerZh: undefined,
    production: undefined,
    environment: undefined,
    description: undefined,
    solverList: [],
    descriptionAttachmentList: [],
    qillData: '',
  },
  fatherLoading: false,
  sonLoading: false,
  editSonVisible: false,

  deleteLoading: false,
  fileVisible: false,
  remarkVisible: false,
  remarks: '',
  changeHaveSonStatusVisible: false,
  changeStatusForm: {
    status: undefined,
    reason: '',
    attachmentList: [],
    workOrderId: undefined,
    solution: undefined,
  },

  deleteVisible: false,
  areaList: [],
  wtlyList: [],
  projectList: [],
  milepostList: [],
  taskList: [],
  customList: [],
  environmentList: [],
  searchEnvironmentList: [],
  productList: [],
  allUser: [],
  warnList: [],
  pmoList: [],
  pmNameList: [],
  previewImage: '',
  previewVisible: false,
  // 工单类型
  workTypeList: [],
  monitorSceneList: [],
});
function validateWorkingHours(rule, value, callback) {
  if (!/^(0(\.5)?|[1-9](\d*)?(\.5)?(\.0)?)$/.test(value)) {
    callback(new Error('请输入大于0的数字(支持0.5的倍数'));
  } else {
    callback();
  }
}
const classifyList = ref([
  {
    title: '全部工单',
    typeKey: 'total',
    img: 'http://10.40.0.33:9001/file-storage/502600455408805888-source.png',
    color: '#3875ff',
    number: 0,
  },
  {
    title: '待分发',
    typeKey: 'distribute',
    img: 'http://10.40.0.33:9001/file-storage/502600501799905280-source.png',
    color: '#3875ff',
    number: 0,
  },
  {
    title: '我的ower工单(解决中)',
    typeKey: 'ownerProcessing',
    img: 'http://10.40.0.33:9001/file-storage/502600579673450496-source.png',
    color: '#3875ff',
    number: 0,
  },
  {
    title: '我的ower工单(超时)',
    typeKey: 'ownerTimeout',
    img: 'http://10.40.0.33:9001/file-storage/502600687070701568-source.png',
    color: '#FF0000',
    number: 0,
  },
  {
    title: '我的ower工单(待关闭)',
    typeKey: 'ownerToBeClosed',
    img: 'http://10.40.0.33:9001/file-storage/502600766517110784-source.png',
    color: '#3875ff',
    number: 0,
  },
  {
    title: '我的解决中工单',
    typeKey: 'solverProcessing',
    img: 'http://10.40.0.33:9001/file-storage/502600833298819072-source.png',
    color: '#3875ff',
    number: 0,
  },
  {
    title: '我的超时工单',
    typeKey: 'solverTimeout',
    img: 'http://10.40.0.33:9001/file-storage/502600902773270528-source.png',
    color: '#FF0000',
    number: 0,
  },
  {
    title: '我的待回访工单',
    typeKey: 'solverToBeVisitedAgain',
    img: 'http://10.40.0.33:9001/file-storage/502600969882134528-source.png',
    color: '#3875ff',
    number: 0,
  },
]);

const updateClassifyList = (data) => {
  classifyList.value.forEach((item) => {
    const list = data[item.typeKey] || [];
    item.number = list.length;
    item.type = item.typeKey; // 添加 type 字段
  });
};
function tabChange(index) {
  state.current = index;
}

function handleAdd() {
  state.addOrEditVisible = true;
  nextTick(() => {
    formRef.value?.setRules?.(rules);
  });
}
function jumpList(key) {
  handleRedirect(`/pages/Page3000001010/Page3000001010?type=${key}`);
}
// 获取列表
function getData() {
  get('/solution-ppm/api/v2/built-in-system-ppm/work_order/mobile/home_page').then((data) => {
    if (data.code !== 200) {
      uni.showToast({
        title: data.message,
        icon: 'error',
      });
      return;
    }
    updateClassifyList(data.data);
  });
}
// 工单类型
// 获取工单类型字典值
function getWorkType() {
  get('/solution-ppm/api/v2/built-in-system-ppm/dictionary/search/GD.GDLX').then((data) => {
    if (data.code !== 200) {
      uni.showToast({
        title: data.message,
        icon: 'error',
      });
      return;
    }
    state.workTypeList = data.data.map((item) => {
      return {
        label: item.itemName,
        value: item.itemCode,
      };
    });
  });
}
// 新建类型确认
function handleTypeConfirm(val) {
  if (!val || val.length === 0) {
    state.modalForm.type = state.workTypeList[0].label;
  } else {
    state.modalForm.type = val[0].label; // 存 itemCode
  }
}
// //类型变了清除监控场景
watch(
  () => state.modalForm.type,
  () => {
    state.modalForm.monitorScene = undefined;
    state.modalForm.monitorSceneZh = undefined;
  },
  { deep: true },
);
//区域变了清除其他
watch(
  () => state.modalForm.areaCode,
  () => {
    state.modalForm.customer = undefined;
    state.modalForm.customerZh = undefined;
    state.modalForm.projectId = undefined;
    state.modalForm.projectIdZh = undefined;
    state.modalForm.milepostId = undefined;
    state.modalForm.milepostIdZh = undefined;
    state.modalForm.taskId = undefined;
    state.modalForm.taskIdZh = undefined;
    state.modalForm.environment = state.modalForm.production = state.modalForm.version = undefined;
  },
  { deep: true },
);
//客户变了清除其他
watch(
  () => state.modalForm.customer,
  () => {
    state.modalForm.projectId = undefined;
    state.modalForm.projectIdZh = undefined;
    state.modalForm.milepostId = undefined;
    state.modalForm.milepostIdZh = undefined;
    state.modalForm.taskId = undefined;
    state.modalForm.taskIdZh = undefined;
    state.modalForm.environment = state.modalForm.production = state.modalForm.version = undefined;
  },
  { deep: true },
);
//项目变了清除其他
watch(
  () => state.modalForm.projectId,
  () => {
    state.modalForm.milepostId = undefined;
    state.modalForm.milepostIdZh = undefined;
    state.modalForm.taskId = undefined;
    state.modalForm.taskIdZh = undefined;
    state.modalForm.environment = state.modalForm.production = state.modalForm.version = undefined;
  },
  { deep: true },
);
//项目阶段变了清除其他
watch(
  () => state.modalForm.milepostId,
  () => {
    state.modalForm.taskId = undefined;
    state.modalForm.taskIdZh = undefined;
  },
  { deep: true },
);
//环境变了清除其他
watch(
  () => state.modalForm.environment,
  () => {
    state.modalForm.production = state.modalForm.version = undefined;
  },
  { deep: true },
);
// 获取监控场景list
function getMonitorSceneList() {
  const params = state.modalForm.type;
  get(`/solution-ppm/api/v2/built-in-system-ppm/dictionary/search/${params}`).then((data) => {
    if (data.code !== 200) {
      uni.showToast({
        title: data.message,
        icon: 'error',
      });
      return;
    }
    state.monitorSceneList = data.data.map((item) => {
      return {
        label: item.itemName,
        value: item.itemCode,
      };
    });
  });
}
function showMonitorScence() {
  getMonitorSceneList();
  state.addMonitorSceneVisible = true;
}
// 监控场景确认
function handleMonitorScenceConfirm(val) {
  if (!val || val.length === 0) {
    state.modalForm.monitorScene = state.monitorSceneList[0].value;
    state.modalForm.monitorSceneZh = state.monitorSceneList[0].label;
  } else {
    state.modalForm.monitorScene = val[0].value; // 存 itemCode
    state.modalForm.monitorSceneZh = val[0].label; // 存 itemCode
  }
}

// 监控场景清空清除监控场景的值
function handleMonitorScenceClear() {
  state.modalForm.monitorScene = undefined;
  state.modalForm.monitorSceneZh = undefined;
}
// 优先级确认
function handlePriorityConfirm(val) {
  if (!val || val.length === 0) {
    state.modalForm.priority = 'p0';
  } else {
    state.modalForm.priority = val[0].label; // 存 itemCode
  }
  getSolveTimeByType(state.modalForm.priority);
}
//     根据类型获取解决时间
function getSolveTimeByType(type) {
  let num = 0;
  if (type == 'p0') {
    num = 4;
    state.modalForm.workHours = 4;
  } else if (type == 'p1') {
    num = 24;
    state.modalForm.workHours = 24;
  } else if (type == 'p2') {
    num = 96;
    state.modalForm.workHours = 96;
  } else if (type == 'p3') {
    num = 48;
    state.modalForm.workHours = 336;
  }
  getSolveTime();
}
//     计算解决时间
function getSolveTime() {
  // 获取当前时间
  let currentDate = dayjs();
  let num = state.modalForm.workHours;
  // 计算新时间
  let newDate = currentDate.add(num, 'hour');

  // 格式化新时间为 "YYYY-MM-DD HH:mm" 格式
  let formattedDate = newDate.format('YYYY-MM-DD HH:mm:ss');

  state.modalForm.endTime = formattedDate;
}
// 计划解决时间时间确定
function handleTimeConfirm(val) {
  state.modalForm.endTime = dayjs(val.result).format('YYYY-MM-DD HH:mm:ss');
}
// 获取区域
function getAreaList() {
  get('/solution-ppm/api/v2/built-in-system-ppm/work_order/area_info').then((data) => {
    if (data.code !== 200) {
      uni.showToast({
        title: data.message,
        icon: 'error',
      });
      return;
    }
    state.areaList = data.data.map((item) => {
      return {
        label: item.areaName,
        value: item.areaCode,
      };
    });
    state.areaVisible = true;
  });
}
// 获取问题来源
function getWtly() {
  get('/solution-ppm/api/v2/built-in-system-ppm/dictionary/search/GD.WTLY').then((data) => {
    if (data.code !== 200) {
      uni.showToast({
        title: data.message,
        icon: 'error',
      });
      return;
    }
    state.wtlyList = data.data.map((item) => {
      return {
        label: item.itemName,
        value: item.itemName,
      };
    });
    state.sourceVisible = true;
  });
}
// 问题源确定
function handleSourceConfirm(val) {
  if (!val || val.length === 0) {
    state.modalForm.questionSource = state.wtlyList[0].label;
  } else {
    state.modalForm.questionSource = val[0].value; // 存 itemCode
  }
}
// 区域确定
function handleAreaConfirm(val) {
  if (!val || val.length === 0) {
    state.modalForm.areaCode = state.areaList[0].value;
    state.modalForm.areaCodeZh = state.areaList[0].label;
  } else {
    state.modalForm.areaCode = val[0].value; // 存 itemCode
    state.modalForm.areaCodeZh = val[0].label; // 存 itemCode
  }
}

// 区域清空清除监控场景的值
function handleAreaClear() {
  state.modalForm.areaCode = undefined;
  state.modalForm.areaCodeZh = undefined;
  state.modalForm.customer = undefined;
  state.modalForm.customerZh = undefined;
  state.modalForm.projectId = undefined;
  state.modalForm.projectIdZh = undefined;
  state.modalForm.milepostId = undefined;
  state.modalForm.milepostIdZh = undefined;
  state.modalForm.taskId = undefined;
  state.modalForm.taskIdZh = undefined;
  state.modalForm.environment = state.modalForm.production = state.modalForm.version = undefined;
}
// 获取客户
function getCustomerList() {
  get(
    `/solution-ppm/api/v2/built-in-system-ppm/work_order/customer?areaCode=${
      state.modalForm.areaCode ? state.modalForm.areaCode : ''
    }`,
  ).then((data) => {
    if (data.code !== 200) {
      uni.showToast({
        title: data.message,
        icon: 'error',
      });
      return;
    }
    state.customList = data.data.map((item) => {
      return {
        label: item.name,
        value: item.id,
      };
    });
    state.costomVisible = true;
  });
}
// 客户清除
function handleCostomClear() {
  state.modalForm.customer = undefined;
  state.modalForm.customerZh = undefined;
  state.modalForm.projectId = undefined;
  state.modalForm.projectIdZh = undefined;
  state.modalForm.milepostId = undefined;
  state.modalForm.milepostIdZh = undefined;
  state.modalForm.taskId = undefined;
  state.modalForm.taskIdZh = undefined;
  state.modalForm.environment = state.modalForm.production = state.modalForm.version = undefined;
}
// 客户确定
function handleCostomfirm(val) {
  if (!val || val.length === 0) {
    state.modalForm.customer = state.customList[0].label;
    state.modalForm.customerZh = state.customList[0].label;
  } else {
    state.modalForm.customer = val[0].label; // 存 itemCode
    state.modalForm.customerZh = val[0].label; // 存 itemCode
  }
}
// 获取项目
// 项目
function getProjectList() {
  if (state.modalForm.areaCode) {
    get(
      `/solution-ppm/api/v2//built-in-system-ppm/work_order/project_by_area_code/${state.modalForm.areaCode}`,
    ).then((data) => {
      if (data.code !== 200) {
        uni.showToast({
          title: data.message,
          icon: 'error',
        });
        return;
      }
      state.projectList = data.data.map((item) => {
        return {
          label: item.projectName,
          value: item.projectId,
        };
      });
      state.projectVisible = true;
    });
  } else {
    get(`/solution-ppm/api/v2//built-in-system-ppm/work_order/project_by_area_code/0`).then(
      (data) => {
        if (data.code !== 200) {
          uni.showToast({
            title: data.message,
            icon: 'error',
          });
          return;
        }
        state.projectList = data.data.map((item) => {
          return {
            label: item.projectName,
            value: item.projectId,
          };
        });
      },
    );
  }
  state.projectVisible = true;
}
// 项目清除
function handleProjectClear() {
  state.modalForm.projectId = undefined;
  state.modalForm.projectIdZh = undefined;
  state.modalForm.milepostId = undefined;
  state.modalForm.milepostIdZh = undefined;
  state.modalForm.taskId = undefined;
  state.modalForm.taskIdZh = undefined;
  state.modalForm.environment = state.modalForm.production = state.modalForm.version = undefined;
}
// 项目确定
function handleProjectConfirm(val) {
  console.log(val);

  if (!val || val.length === 0) {
    state.modalForm.projectId = state.projectList[0].value;
    state.modalForm.projectIdZh = state.projectList[0].label;
  } else {
    state.modalForm.projectId = val[0].value; // 存 itemCode
    state.modalForm.projectIdZh = val[0].label; // 存 itemCode
  }
}
// 获取项目阶段
function getMilepostList() {
  get(
    `/solution-ppm/api/v2/built-in-system-ppm/work_order/milepost_by_project_id/${state.modalForm.projectId}`,
  ).then((data) => {
    if (data.code !== 200) {
      uni.showToast({
        title: data.message,
        icon: 'error',
      });
      return;
    }
    state.milepostList = data.data.map((item) => {
      return {
        label: item.milepostName,
        value: item.milepostId,
      };
    });
    state.milepostVisible = true;
  });
}
// 项目阶段清除
function handleMilepostClear() {
  state.modalForm.milepostId = undefined;
  state.modalForm.milepostIdZh = undefined;
  state.modalForm.taskId = undefined;
  state.modalForm.taskIdZh = undefined;
}
// 项目阶段确定
function handleMilepostConfirm(val) {
  if (!val || val.length === 0) {
    state.modalForm.milepostId = state.milepostList[0].value;
    state.modalForm.milepostIdZh = state.milepostList[0].label;
  } else {
    state.modalForm.milepostId = val[0].value; // 存 itemCode
    state.modalForm.milepostIdZh = val[0].label; // 存 itemCode
  }
}
// 获取任务
function getTaskList() {
  get(
    `/solution-ppm/api/v2/built-in-system-ppm/delivery_task/get_by_milepost_id/${state.modalForm.milepostId}`,
  ).then((data) => {
    if (data.code !== 200) {
      uni.showToast({
        title: data.message,
        icon: 'error',
      });
      return;
    }
    state.taskList = data.data.map((item) => {
      return {
        label: item.taskName,
        value: item.taskId,
      };
    });
    state.taskVisible = true;
  });
}
// 任务清除
function handleTaskClear() {
  state.modalForm.taskId = undefined;
  state.modalForm.taskIdZh = undefined;
}
// 任务确定
function handleTaskConfirm(val) {
  if (!val || val.length === 0) {
    state.modalForm.taskId = state.taskList[0].value;
    state.modalForm.taskIdZh = state.taskList[0].label;
  } else {
    state.modalForm.taskId = val[0].value; // 存 itemCode
    state.modalForm.taskIdZh = val[0].label; // 存 itemCode
  }
}
// 获取环境
function getEnvironmentList() {
    console.log(state.customList);
    
  let customerId = state.customList.find((item) => item.label === state.modalForm.customer)?.value;
  console.log(customerId);
  
  get(
    `/solution-ppm/api/v2/built-in-system-ppm/work_order/env?customerId=${
      customerId ? customerId : ''
    }`,
  ).then((data) => {
    state.environmentList = data.data.map((item) => {
      return {
        label: item.name,
        value: item.id,
      };
    });
    state.environmentVisible = true;
  });
}
// 环境清除
function handleEnvironmentClear() {
  state.modalForm.environment = state.modalForm.production = state.modalForm.version = undefined;
}
// 环境确定
function handleEnvironmentConfirm(val) {
  if (!val || val.length === 0) {
    state.modalForm.environment = state.environmentList[0].label;
  } else {
    state.modalForm.environment = val[0].label; // 存 itemCode
  }
}
// 获取产品
function getProductList() {
  let envId = state.environmentList.find((item) => item.label === state.modalForm.environment)?.value;
  get(
    `/solution-ppm/api/v2/built-in-system-ppm/work_order/product?envId=${envId ? envId : ''}`,
  ).then((data) => {
    state.productList = data.data.map((item) => {
      return {
        label: item.name,
        value: item.id,
      };
    });
    state.productionVisible = true;
  });
}
// 产品清除
function handleProductionClear() {
  state.modalForm.version = undefined;
  state.modalForm.environment = undefined;
  state.modalForm.production = undefined;
  getVersionList();
}
// 产品确定
function handleProductionConfirm(val) {
  if (!val || val.length === 0) {
    state.modalForm.production = state.productList[0].label;
  } else {
    state.modalForm.production = val[0].label; // 存 itemCode
  }
  getVersionList();
}
// 获取版本
function getVersionList() {
    console.log(state.productList,'productList');
    
  let envId = state.environmentList.find((item) => item.label === state.modalForm.environment)?.value;
  let productId = state.productList.find((item) => item.label === state.modalForm.production)?.value;
  get(
    `/solution-ppm/api/v2/built-in-system-ppm/work_order/version?envId=${
      envId ? envId : ''
    }&productId=${productId ? productId : ''}`,
  ).then((data) => {
    state.modalForm.version = data.data;
  });
}
// 获取告警级别list
function getWarnList() {
  get('/solution-ppm/api/v2/built-in-system-ppm/dictionary/search/GD.GJJB').then((data) => {
    if (data.code !== 200) {
      uni.showToast({
        title: data.message,
        icon: 'error',
      });
      return;
    }
    state.warnList = data.data.map((item) => {
      return {
        label: item.itemName,
        value: item.itemName,
      };
    });
    state.warnVisible = true
  });
}
// 告警级别清除
function handleWarnClear() {
  state.modalForm.warningLevel = undefined;
}
// 告警级别确定
function handleWarnConfirm(val) {
  if (!val || val.length === 0) {
    state.modalForm.warningLevel = state.warnList[0].label;
  } else {
    state.modalForm.warningLevel = val[0].label; // 存 itemCode
  }
}
function submit() {
  formRef.value.validate().then(() => {
    state.fatherLoading = true;
    post('/solution-ppm/api/v2/built-in-system-ppm/work_order', state.modalForm)
      .then((data) => {
        if (data.code !== 200) {
          uni.showToast({
            title: data.message,
            icon: 'error',
          });
          return;
        }
        uni.showToast({
          title: data.message,
          icon: 'success',
        });

        resetFather();
        getData();
      })
      .finally(() => {
        state.fatherLoading = false;
      });
  });
}
function resetFather() {
  state.addOrEditVisible = false;
  state.modalForm = {
    content: undefined,
    type: undefined,
    priority: undefined,
    questionSource: undefined,
    monitorScene: undefined,
    monitorSceneZh: undefined,
    workHours: undefined,
    endTime: undefined,
    areaCode: undefined,
    areaCodeZh: undefined,
    projectId: undefined,
    projectIdZh: undefined,
    milepostId: undefined,
    milepostIdZh: undefined,
    taskId: undefined,
    taskIdZh: undefined,
    version: undefined,
    warningLevel: undefined,
    customer: undefined,
    customerZh: undefined,
    production: undefined,
    environment: undefined,
    description: undefined,
    solverList: [],
    descriptionAttachmentList: [],
    qillData: '',
  };
}
</script>
<style lang="less" scoped>
.page_root {
  min-height: 100%;
  box-sizing: border-box;
  // overflow: auto;
}
/*样式*/
.popup-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.popup-header {
  height: 50px;
  line-height: 50px;
  color: #fff;
  text-align: center;
  font-weight: bold;
  background-color: #3575c7;
  z-index: 10;
  position: relative;
}
.header-icon {
  position: absolute;
  right: 16px;
  top: 0;
}

.popup-body {
  flex: 1;
  overflow-y: auto;
  background-color: rgb(225, 239, 253);
  padding: 15px;
}
.body-inner {
  background-color: #fff;
  padding: 0 15px;
  min-height: 100%;
  border-radius: 15px;
}
.popup-footer {
  padding: 10px;
  background-color: rgb(225, 239, 253);
  border-top: 1px solid #eee;
  z-index: 10;
}
.main {
  height: calc(100vh - 20px);
  background: linear-gradient(180deg, #e1effd 100%, #ffffff 0%);
  padding: 15px 15px 0 15px;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  // position: relative;
  overflow: hidden;
}
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.now-data {
  width: 72px;
  height: 22px;
  background-image: url('http://10.40.0.33:9001/file-storage/502585813408114688-source.png');
  background-size: cover;
}
.add-img {
  position: relative;
  top: 3px;
  width: 14px;
  z-index: 999;
  height: 14px;
  background-image: url('http://10.40.0.33:9001/file-storage/502585864102569984-source.png');
  background-size: cover;
}
.add-btn {
  display: flex;
  width: 110px;
  height: 28px;
  background-image: linear-gradient(104deg, rgba(0, 133, 255, 0.8) 0%, #0071ff 100%);
  border-radius: 4px;
  padding: 4px 16px;
  gap: 8px;
  font-family: PingFangSC-Medium;
  font-size: 14px;
  color: #ffffff;
  letter-spacing: 0;
  text-align: center;
  font-weight: 500;
}
.classify-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.classify-item {
  height: 60px;
  background: rgba(255, 255, 255, 0.8);
  border: 1.5px solid #ffffff;
  box-shadow: 0 4px 10px 0 #cfe7ff;
  border-radius: 4px;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
}
.classify-left {
  display: flex;
  gap: 8px;
  align-items: center;
}
.classify-img-body {
  width: 36px;
  height: 36px;
  background: rgba(0, 139, 255, 0.1);
  border-radius: 4px;

  position: relative;
}
.classify-img {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-size: cover;
}
.classify-title {
  font-size: 14px;
  color: #262626;
  letter-spacing: 0;
  font-weight: 500;
}
.classify-number {
  font-size: 18px;
  letter-spacing: 0;
  text-align: right;
  font-weight: 700;
}
.custom-tabs {
  display: flex;
  position: relative;
  background-color: #3575c7;
}

.custom-tab {
  flex: 1;
  text-align: center;
  cursor: pointer;
  padding: 10px;
  background-color: transparent;
  position: relative;
  font-size: 16px;
  color: #b8d0ec;
  letter-spacing: 0;
  text-align: center;
  font-weight: 400;
  transition: border-color 0.6s;
  text-align: center;
}

.custom-tab.active {
  background-color: transparent;

  font-size: 16px;
  color: #ffffff;
  letter-spacing: 0;
  font-weight: 600;
  text-align: center;
}

.custom-tab-underline {
  display: block;
  width: 40px;
  height: 2px;
  background-color: #fff;
  position: absolute;
  bottom: 0;
  left: calc(50% - 20px);
  transition: width 0.6s;
}
.border-middle {
  width: 1px;
  height: 23px;
  position: absolute;
  border: 1px solid #729fd8;
  left: 50%;
  top: 50%;
  transform: translate(-33%, -50%);
}
:deep(.u-form-item) {
  padding: 0;
}
/*样式*/
</style>
